<template>
	<view :data-theme="theme" class="goods_return">
		<useNavBar :title="$t(`page.users.goodsReturn.navTitle`)">
			<view
				slot="right"
				style="color: #fff"
				class="iconfont icon-more"
				@click="open"
			></view>
		</useNavBar>
		<form @submit="subRefund" report-submit="true">
			<view class="apply-return">
				<view
					class="goodsStyle acea-row row-between borRadius14"
					v-for="(item, index) in orderInfo.orderInfoList"
					:key="index"
				>
					<view class="pictrue">
						<image :src="item.image"></image>
					</view>
					<view class="text">
						<view class="name line3" style="float: left">{{
							item.productName
						}}</view>
						<view class="money">
							<view
								><statistic :value="item.price" :currency="item.currency"
							/></view>
							<view class="num">x{{ item.payNum }}</view>
						</view>
					</view>
				</view>
				<view class="list borRadius14">
					<view class="item acea-row row-between-wrapper">
						<view>{{ $t(`page.users.goodsReturn.number`) }}</view>
						<view class="num">{{ orderInfo.totalNum }}</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{ $t(`page.users.goodsReturn.price`) }}</view>
						<view class="num"
							><statistic
								:value="orderInfo.payPrice"
								:currency="orderInfo.currency"
						/></view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{ $t(`page.users.goodsReturn.reason`) }}</view>
						<picker
							class="num"
							@change="bindPickerChange"
							:value="index"
							:range="RefundArray"
						>
							<!-- @click="setReasonPickerShow(true)" -->
							<view class="picker acea-row row-between-wrapper">
								<view class="reason">{{ RefundArray[index] }}</view>
								<!-- <text class="iconfont icon-gengduo"></text> -->
							</view>
						</picker>
					</view>
					<view class="item textarea acea-row row-between">
						<view>{{ $t(`page.users.goodsReturn.info`) }}</view>
						<textarea
							:placeholder="$t(`page.users.goodsReturn.place`)"
							class="num num-textarea"
							name="refund_reason_wap_explain"
						></textarea>
					</view>
					<view class="item acea-row row-between" style="border: none">
						<view class="title acea-row row-between-wrapper">
							<view>{{ $t(`page.users.goodsReturn.voucher`) }}</view>
							<view class="tip">{{
								"(" + $t(`message.tips.upPic`) + ")"
							}}</view>
						</view>
						<view class="upload acea-row row-middle">
							<use-upload
								style="margin-top: 10rpx"
								v-model="refund_reason_wap_imgPath"
								model="product"
								pid="1"
							/>

							<!-- <view class='pictrue' v-for="(item,index) in refund_reason_wap_imgPath" :key="index">
								<image :src='item'></image>
								<view class='iconfont icon-zhifushibai font-color' @tap='DelPic(index)'></view>
							</view>
							<view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic'
								v-if="refund_reason_wap_imgPath.length < 5">
								<text class='iconfont icon-icon25201'></text>
								<view>{{$t(`page.users.goodsReturn.upload`)}}</view>
							</view> -->
						</view>
					</view>
					<button class="returnBnt bg_color" form-type="submit">
						{{ $t(`page.users.goodsReturn.submit`) }}
					</button>
				</view>
			</view>
		</form>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
		<!-- <u-picker
			:show="reasonPickerShow"
			:columns="RefundReasonArray"
			:confirmText="$t(`page.goodsDetail.confirm`)"
			:cancelText="$t(`page.goodsDetail.cancel`)"
			@confirm="bindPickerChange"
			@cancel="setReasonPickerShow(false)"
			confirm-color="#00785e"
		>
		</u-picker> -->
	</view>
</template>
<script>
import {
	ordeRefundReason,
	orderRefundVerify,
	applyRefund,
} from "@/api/order.js";
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
import { Debounce } from "@/utils/validate.js";
import statistic from "@/components/statistic";

export default {
	components: { statistic },
	data() {
		return {
			refund_reason_wap_img: [],
			refund_reason_wap_imgPath: [],
			orderInfo: {},
			RefundArray: [],
			index: 0,
			orderId: 0,
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			theme: "theme3",
			rightDrawer: false,
			reasonPickerShow: false,
		};
	},
	computed: {
		...mapState(useAppStore, ["isLogin"]),
		RefundReasonArray() {
			return [[...this.RefundArray]];
		},
	},
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getOrderInfo();
					this.getRefundReason();
				}
			},
			deep: true,
		},
	},
	onLoad: function (options) {
		//uni.setLocale("ru");
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.goodsReturn.navTitle`),
		});
		if (!options.orderId)
			return this.$util.Tips(
				{
					title: this.$t("message.pay.errorOrder"),
				},
				{
					tab: 3,
					url: 1,
				}
			);
		this.orderId = options.orderId;
		if (this.isLogin) {
			this.getOrderInfo();
			this.getRefundReason();
		} else {
			toLogin();
		}
	},
	methods: {
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		returns() {
			uni.navigateBack();
		},
		/**
		 * 获取订单详情
		 *
		 */
		getOrderInfo: function () {
			let that = this;
			applyRefund(that.orderId).then((res) => {
				that.$set(that, "orderInfo", res.data);
			});
		},
		/**
		 * 获取退款理由
		 */
		getRefundReason: function () {
			let that = this;
			ordeRefundReason().then((res) => {
				that.$set(that, "RefundArray", res.data);
			});
		},

		/**
		 * 删除图片
		 *
		 */
		// DelPic: function(e) {
		// 	let index = e,
		// 		that = this;
		// 	that.refund_reason_wap_imgPath.splice(index, 1);
		// },
		/**
		 * 上传文件
		 *
		 */
		// uploadpic: function() {
		// 	let that = this;
		// 	that.$util.uploadImageOne({
		// 		url: 'user/upload/image',
		// 		name: 'multipart',
		// 		model: "product",
		// 		pid: 1
		// 	}, function(res) {
		// 		that.refund_reason_wap_imgPath.push(res.data.url);
		// 	});
		// },

		/**
		 * 申请退货
		 */
		subRefund: Debounce(function (e) {
			let that = this,
				value = e.detail.value;
			uni.showLoading({
				title: this.$t(`message.tips.loding`),
			});
			let refund_reason_wap_img = [];
			that.refund_reason_wap_imgPath.forEach((item) => {
				refund_reason_wap_img.push(item.url);
			});
			//收集form表单
			orderRefundVerify({
				text: that.RefundArray[that.index] || "",
				refund_reason_wap_explain: value.refund_reason_wap_explain,
				refund_reason_wap_img: refund_reason_wap_img.join(","),
				orderNo: that.orderId,
			})
				.then((res) => {
					uni.hideLoading();
					return this.$util.Tips(
						{
							// title: "申请成功",
							title: this.$t(`退款成功`),
							icon: "success",
						},
						{
							tab: 5,
							url: "/pages/users/user_return_list/index?isT=1",
						}
					);
				})
				.catch((err) => {
					uni.hideLoading();
					return this.$util.Tips({
						title: err,
					});
				});
		}),
		bindPickerChange: function (e) {
			this.$set(this, "index", e.detail.value);
			this.setReasonPickerShow(false);
		},
		setReasonPickerShow(val) {
			this.reasonPickerShow = val;
		},
	},
};
</script>

<style scoped lang="scss">
.main_bg {
	@include main_bg_color(theme);
}
.apply-return {
	padding: 20rpx 30rpx 70rpx 30rpx;
}

.apply-return .list {
	background-color: #fff;
	margin-top: 18rpx;
	padding: 0 24rpx 70rpx 24rpx;
}

.apply-return .list .item {
	min-height: 90rpx;
	border-bottom: 1rpx solid #eee;
	font-size: 30rpx;
	color: #333;
	display: flex;
}

.apply-return .list .item .num {
	color: #282828;
	text-align: right;
}

.apply-return .list .item .num .picker .reason {
	width: 100%;
	text-align: left;
	margin: 10rpx 0;
	height: 150rpx;
	display: flex;
	align-items: center;
	// font-size: 28rpx;
	// flex: 1;
}

.apply-return .list .item .num .picker .iconfont {
	color: #666;
	font-size: 30rpx;
	margin-top: 2rpx;
}

.apply-return .list .item.textarea {
	padding: 24rpx 0;
}

.apply-return .list .item textarea {
	height: 100rpx;
	font-size: 30rpx;
}

.apply-return .list .item .placeholder {
	color: #bbb;
}

.apply-return .list .item .title {
	height: 95rpx;
	width: 100%;
}

.apply-return .list .item .title .tip {
	font-size: 30rpx;
	color: #bbb;
}

.apply-return .list .item .upload {
	padding-bottom: 36rpx;
}

.apply-return .list .item .upload .pictrue {
	border-radius: 14rpx;
	margin: 22rpx 23rpx 0 0;
	width: 156rpx;
	height: 156rpx;
	position: relative;
	font-size: 24rpx;
	color: #bbb;
}

.apply-return .list .item .upload .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 14rpx;
}

.apply-return .list .item .upload .pictrue .icon-zhifushibai {
	position: absolute;
	font-size: 35rpx;
	top: -10rpx;
	right: -10rpx;
}

.apply-return .list .item .upload .pictrue .icon-icon25201 {
	color: #bfbfbf;
	font-size: 50rpx;
}

.apply-return .list .item .upload .pictrue:nth-last-child(1) {
	border: 1rpx solid #ddd;
	box-sizing: border-box;
}

.apply-return .returnBnt {
	font-size: 32rpx;
	color: #fff;
	width: 100%;
	height: 86rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 86rpx;
	margin: 43rpx auto;
}

.bg_color {
	@include main_bg_color(theme);
}
.apply-return .list .item .num-textarea {
	text-align: left;
	margin-top: 20rpx;

	.uni-textarea-placeholder {
		color: #bbb;
	}
}
:deep(.uni-picker-view-indicator) {
	height: 100rpx;
}
:deep(.uni-picker-view-content) {
	padding-left: 30rpx;
	padding-right: 30rpx;
}
:deep(.uni-picker-item) {
	height: 150rpx;
	font-size: 26rpx;
	padding: 10rpx 30rpx;
	line-height: 40rpx;
	text-overflow: "";
	white-space: pre-wrap;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
<style lang="scss">
// .uni-picker-view-indicator {
// 	height: 100rpx;
// }

// .uni-picker-view-content {
// 	padding-left: 30rpx;
// 	padding-right: 30rpx;
// }
// .uni-picker-container .uni-picker-item {
// 	height: 150rpx;
// 	font-size: 26rpx;
// 	padding: 10rpx 30rpx;
// 	line-height: 40rpx;
// 	text-overflow: "";
// 	white-space: pre-wrap;
// 	overflow: visible;
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// }
</style>
